<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
    <!--引入外部图标库-->
    <link rel="stylesheet" th:href="@{/lib/layui/myicons/iconfont.css}">
    <script th:src="@{/js/jquery.min.js}"></script>
    <style>
        .content-input {
            width: 12%;
            min-width: 170px;
            display: inline-block;
        }

        .content-input-01,.content-input-02,.content-input-03,.content-input-04 {
            width: 20%;
            min-width: 330px;
        }

        @media screen and (-webkit-min-device-pixel-ratio: 0) {
            .content-input-01,.content-input-02,.content-input-03,.content-input-04 {
                width: 21%;
                min-width: 340px;
            }
        }

        @media screen and (max-width: 1560px) {
            .content-button{
                margin-top: 10px;
            }
        }

        @media screen and (max-width: 900px) {
            .content-button,.content-input-03,.content-input-04{
                margin-top: 10px;
            }
        }

        @media screen and (max-width: 700px) {
            .content-input-02,.content-button,.content-input-03,.content-input-04{
                margin-top: 10px;
            }
            .content-button{
                display: block;
            }
            .layui-laypage button {
                 margin-left:2px;
                 padding:0 5px;
                 cursor:pointer
            }
            .layui-laypage input {
                width:35px;
                margin:0 2px;
                padding:0 3px;
                text-align:center
            }
            .layui-laypage .layui-laypage-skip {
                margin-left:5px;
                margin-right:10px;
                padding:0;
                border:none
            }
            .layui-laypage .layui-laypage-refresh {
                margin-left:10px;
                margin-right:0px;
                padding:0;
                border:none;
                vertical-align: middle;
            }
            .layui-laypage .layui-laypage-count {
                margin-left:10px;
                margin-right:3px;
                padding:0;
                border:none
            }
            .layui-laypage a,
            .layui-laypage span {
                display:inline-block;
                *display:inline;
                *zoom:1;
                vertical-align:middle;
                padding:0 10px;
                height:24px;
                line-height:24px;
                margin:0 -1px 5px 0;
                background-color:#fff;
                color:#333;
                font-size:12px
            }
        }

        .layui-form-checkbox[lay-skin="primary"] {
            padding-left: 22px;
        }

        .layui-layer-my-molv .layui-layer-btn a {
            background: #009f95;
            border-color: #009f95
        }

        .layui-layer-my-molv .layui-layer-btn .layui-layer-btn1 {
            background: #FFF
        }
    </style>
</head>
<body>

<div style="padding: 0 10px">

    <div>
        <!--查询条件表单-->
        <form class="layui-form layui-form-pane" id="searchFrom" action="" style="margin-bottom: 10px;">

            <div class="layui-row" style="margin-top: 10px">
                <div class="content-input content-input-01">
                    <label class="layui-form-label">销售日期</label>
                    <div class="layui-input-inline" style="margin-right: 30px;">
                        <input type="text" name="businessDate" lay-verify="required" placeholder="日期格式：yyyy-MM-dd" autocomplete="off"
                               class="layui-input" style="width: 186px;">
                    </div>
                </div>

                <div class="content-input content-input-03">
                    <!--销售种类-->
                    <label class="layui-form-label">销售种类</label>
                    <div class="layui-input-inline" style="margin-right: 30px;">
                        <select name="sellTypeId" id="varieties">
                            <option value="">请选择销售种类</option>
                            <option value="1">收银 (住房收入)</option>
                            <option value="2">销售 (商品/菜品销售收入)</option>
                            <option value="3">采购 (进货支出)</option>
                        </select>
                    </div>
                </div>

                <div class="content-input content-button">
                    <input type="button" class="layui-btn layui-btn-normal" id="searchBtn" value="查询" style="margin-right: 1%">
                    <input type="reset" class="layui-btn layui-btn-normal" value="清空">
                </div>
            </div>
        </form>

        <table class="layui-table">
            <colgroup>
                <col width="16.5%">
                <col width="16.5%">
                <col width="16.5%">
                <col width="16.5%">
                <col width="16.5%">
                <col width="16.5%">
            </colgroup>
            <tr style="text-align: center;background-color: #f2f2f2;">
                <td style="font-size: 14px;">收入：</td>
                <td id="income" style="color: blue;">xxxx</td>
                <td style="font-size: 14px;">支出：</td>
                <td id="expend" style="color: blue;">xxxx</td>
                <td style="font-size: 14px;">总收入：</td>
                <td id="totalIncome" style="color: blue;">xxxx</td>
            </tr>
        </table>

    </div>
    <table class="layui-hide" id="listInfo" lay-filter="listInfo"></table>


</div>

<script th:src="@{/lib/layui/layui.js}"></script>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table
            ,form = layui.form;

        var tableIns = $("#listInfo");

        var nowDate = getNowDate();
        // alert(nowDate)

        reloadMethod('business/initData?businessDate='+nowDate);

        /**
         *  点击查询按钮后重新加载表格
         */
        $("#searchBtn").click(function () {
            var datas = $("#searchFrom").serialize();
            nowDate = $("input[name='businessDate']").val();
            var url = 'business/initData?'+datas;
            reloadMethod(url);
        });

        /**
         * 初始化加载方法
         */
        function reloadMethod(urlData) {
            tableIns = table.render({
                elem: '#listInfo'
                , url: urlData
                , toolbar: 'false' //开启头部工具栏，并为其绑定左侧模板
                , limit: 20
                , height: 'full-126'
                , defaultToolbar: ['filter', 'exports', 'print']
                , title: '营业数据表'
                , initSort: {
                    field: 'id' //排序字段，对应 cols 设定的各字段名
                    ,type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
                , cols: [
                    [
                        // {type: 'checkbox', fixed: 'left'}
                        {field: 'id', title: '序号', fixed: 'left', unresize: true, sort: true}
                        , {field: 'sell', title: '销售种类',templet:'<div>{{d.sellTypeBean.typeName}}</div>',sort:true}
                        , {field: 'addSell', title: '销售类型', sort: true,templet:'<div>{{d.sellTypeId==3?"支出":"收入"}}</div>'}
                        , {field: 'price', title: '销售/采购 价格', sort: true, templet:'<div>{{d.price/100}}元</div>'}
                        , {field: 'sellDate', title: '销售时间', sort: true}
                        , {field: '', title: '操作员', sort: true, templet:'<div>{{d.employeeBean.name}}</div>'}
                    ]
                ]
                , page: { //支持传入 laypage 组件的所有参数
                    theme:'#08F'
                    , layout: ['count', 'limit', 'prev', 'page', 'next', 'skip', 'refresh'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    ,groups: 5 //只显示 5 个连续页码
                    , first: '首页' //显示首页
                    , last: '尾页' //显示尾页
                }
                , done: function(res, curr, count){         //表格渲染完成后的方法
                    $("#income").text(res.income+"元");      //为收入赋值
                    $("#expend").text(res.expend+"元");      //为支出赋值
                    $("#totalIncome").text(res.income-res.expend+"元");  //为总收入赋值
                    $("input[name='businessDate']").val(nowDate);
                }
            });
        }

        /**
         * 获取当前时间 年-月-日
         */
        function getNowDate(){
            var myDate = new Date();
            var year=myDate.getFullYear();        //获取当前年
            var month=myDate.getMonth()+1;   //获取当前月
            var date=myDate.getDate();            //获取当前日
            var now=year+'-'+getNow(month)+"-"+getNow(date);
            return now;
        }

        //判断是否在日期前面加0
        function getNow(s) {
            return s < 10 ? '0' + s: s;
        }


    });
</script>
</body>
</html>